<template>
    <div>
      <div>
        <search-bar  @dataSent="handleDataSent" ></search-bar>
      </div>
      
      <div style="display: flex;justify-content: center">
        <h3 style="color: black;padding: 30px;    width: 1240px;
    max-width: 1240px;
    padding-right: 20px;
      padding-left: 20px;">Explore</h3> 
      </div>
      <popular-Guid :queryParam="queryParam1" ></popular-Guid>
      <!-- <popular-Guid :queryParam="queryParam2"></popular-Guid> -->
    </div>
  </template>
  
  <script setup>
   import SearchBar from '@/components/Home/search-bar.vue';
   import PopularGuid from '@/components/Home/explore.vue';
   import { ref, computed   } from 'vue';
   import { useRoute } from 'vue-router';
   const search = ref(false)
   import { useStore } from 'vuex';
const store = useStore();
  store.commit('setFalseGuidEdit');
   const route =useRoute();
    // 定义查询条件
    const queryParam1 = ref({
    page: 0,
    size: 20
  });
    // 定义查询条件
    const queryParam2 = ref({
    page: 1,
    size: 10
  });

  if(route.query){
    queryParam1.value.title = route.query.search;

}

    // 处理从子组件发送的数据
const handleDataSent = (data) => {
  // 合并 queryParam 和 data
  queryParam1.value = { ...queryParam1.value, ...data.value};
  search.value = true
  // 输出接收到的数据
  console.log('search:', search);
};

function cancelSearch(params) {
  queryParam.value = {
    page: 0,
    size: 10,
    hot: 1
  };
  search.value = false
}
  </script>